<template>
  <div class="commodity">
    <van-search
      class="header"
      shape="round"
      v-model="value"
      placeholder="搜索商品"
    >
      <i class="iconfont icon-sousuo icon-size" slot="left-icon"></i>
    </van-search>
    <Location @changeShowLogin="changeShowLogin"></Location>
    <Notice :value="noticeValues"></Notice>
    <ShopBar @toDetail="toDetail" ref="shopping"></ShopBar>
    <!-- 提交订单栏 -->
    <SubmitBar
      @changeShowLogin="changeShowLogin"
      ref="submitBar"
      :show="showBar"
    ></SubmitBar>
    <!-- 商品详情-遮罩层 -->
    <van-overlay
      duration="0.5"
      class="overlay"
      z-index="11"
      :show="show"
      @click="toDetail"
    >
      <div class="wrapper" @click.stop>
        <Detail
          class="border"
          :show="show"
          @toDetail="toDetail"
          :currentCommodity="currentCommodity"
        ></Detail>
      </div>
    </van-overlay>
    <!-- 去登录遮罩层 -->
    <ToLogin :show="showLogin" @changeShow="changeShowLogin"></ToLogin>
  </div>
</template>

<script>
import Vue from "vue";
import { Search, NoticeBar, Swipe, SwipeItem } from "vant";
import Location from "@/components/commodity/Location";
import Notice from "@/components/commodity/Notice";
import ShopBar from "@/components/commodity/ShopBar";
import Detail from "@/components/commodity/Detail";
import SubmitBar from "@/components/commodity/SubmitBar";
import ToLogin from "../../components/ToLogin";

Vue.use(Search).use(NoticeBar).use(Swipe).use(SwipeItem);
export default {
  name: "commidity",
  components: {
    Location,
    Notice,
    ShopBar,
    Detail,
    SubmitBar,
    ToLogin,
  },
  data() {
    return {
      value: "",
      noticeValues: [
        "内容 1 这是一段最多显示一行的文字，多余的内容会被省略",
        "内容 2 这是一段最多显示一行的文字，多余的内容会被省略",
        "内容 3 这是一段最多显示一行的文字，多余的内容会被省略",
      ],
      show: false,
      showBar: this.$store.getters.cart.commodityList.length != 0,
      showLogin: false,
      currentCommodity: {},
      // image: require("@/assets/img/bg7.jpg")
    };
  },
  computed: {
    listenShoppingCart() {
      return this.$store.state.cart;
    },
    storeInfo() {
      return this.$store.getters.storeInfo;
    },
    userInfo() {
      return this.$store.getters.userInfo;
    },
    isTakeSelf() {
      return this.$store.getters.isTakeSelf;
    },
    currentAddress() {
      return this.$store.getters.currentAddress;
    },
  },
  watch: {
    listenShoppingCart: {
      handler(newValue, oldValue) {
        console.log("购物车的数据变动");
        if (newValue.totalCount != 0) {
          this.showBar = true;
        } else {
          this.showBar = false;
          console.log("购物车为空");
        }
      },
      immediate: false,
      deep: true,
    },
    isTakeSelf(newValue, oldValue) {
      if (newValue == 0) {
        if (JSON.stringify(this.currentAddress) == "{}") {
          this.$router.push("addressList");
        }
      }
    },
  },
  mounted() {
    this.$store.dispatch("setAction", 1);
  },
  beforeRouteEnter(to, from, next) {
    // ...
    console.log(from.fullPath, from.fullPath == "/store");
    if (from.fullPath == "/store") {
      console.log("准备跳转到商品界面");
      next((vm) => {
        console.log("跳转到商品界面");
        if (JSON.stringify(vm.storeInfo) == "{}") {
          //门店未选择
          vm.$router.push("/");
        } else {
          //门店已选择
          vm.$router.push("/commodity");
        }
      });
    } else {
      next((vm) => {
        if (JSON.stringify(vm.storeInfo) == "{}") {
          //门店未选择
          vm.$router.push("store");
        } else {
          //门店已选择
        }
      });
    }
  },
  methods: {
    toDetail(commodity) {
      if (this.show) {
        this.show = false;
      } else {
        this.currentCommodity = commodity;
        this.show = true;
      }
    },
    changeShowLogin() {
      if (this.showLogin) {
        this.showLogin = false;
      } else {
        this.showLogin = true;
      }
    },
  },
};
</script>

<style scoped>
.commodity {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.header {
  /* position: absolute; */
  padding-top: 0.673rem;
  line-height: 1.457rem;
  /* left: 0px;
  top: 0px;
  right: 0px; */
}
.van-cell {
  font-size: 14px;
  line-height: 0.5rem;
}
.icon-size {
  font-size: 18px;
  color: #969799;
}
/* 遮罩层 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 16rem;
  margin: 3rem 0.5rem 0 0.5rem;
  background-color: #fff;
  border-radius: 10px;
}
</style>